{extend name='common/content' /}

{block name="content"}

<div id="e0" style="height: 500%"></div>
<div id="e1" style="height: 800%"></div>
<!-- <div id="e2" style="height: 500%"></div> -->
<!-- <div id="e3" style="height: 500%"></div> -->

<script type="text/javascript">
var dom0 = document.getElementById("e0");
var myChart0 = echarts.init(dom0);
var dom = document.getElementById("e1");
var myChart1 = echarts.init(dom);
// var dom2 = document.getElementById("e2");
// var myChart2 = echarts.init(dom2);
// var dom3 = document.getElementById("e3");
// var myChart3 = echarts.init(dom3);
var app = {};
option1 = null;

// var xData1 = ['思茅区', '西盟县', '澜沧县'];
// var yData1 = ['站点数', '主管用户数', '服务商用户数'];

// var data1 = [
// [0,0,1],[1,1,4],[2,2,7],
// [1,0,2],[0,1,5],[1,2,8],
// [2,0,3],[2,1,6],[0,2,9]
// ];

// var xData1 = "{$xData}";
// var yData1 = "{$yData}";
// var data1 = "{$dData}";
var xData1 = <?php echo json_encode($xData1);?>;
var yData1 = <?php echo json_encode($yData);?>;
var data1 = <?php echo json_encode($dData);?>;
var setData = <?php echo json_encode($setData);?>;
// console.log(xData1);

option0 = {
    backgroundColor: '#eee',
    legend: {},
    tooltip: {
        trigger: 'axis',
        showContent: false
    },
    dataset: {
        // source: [
        //     ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
        //     ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
        //     ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
        //     ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
        //     ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1],
        // ]
        source: setData
    },
    xAxis: {type: 'category'},
    yAxis: {gridIndex: 0,minInterval: 1},
    grid: {top: '55%'},
    series: [
        {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            label: {
                formatter: '{b}: {@个数} ({d}%)'
            },
            encode: {
                itemName: 'num',
                value: '个数',
                tooltip: '个数'
            }
        },
        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
    ]
};

myChart0.on('updateAxisPointer', function (event) {
    var xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
        var dimension = xAxisInfo.value + 1;
        myChart0.setOption({
            series: {
                id: 'pie',
                label: {
                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                    value: dimension,
                    tooltip: dimension
                }
            }
        });
    }
});

myChart0.setOption(option0);


option1 = {
        backgroundColor: '#eee',
    // tooltip : { // 提示框
    //     trigger : 'item',
    //     formatter : '{a}:{b}: {c}',
    // },
    visualMap: {
        show:false,
        max: 20,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        }
    },
    xAxis3D: {
        name:'地区',
        type: 'category',
        data: xData1,
        axisLabel:{
            show:true,
            // margin:15,
            interval:0,//可控制坐标轴刻度标签的显示间隔，在类目轴中有效。
            formatter:"{value}"//自定义x轴显示数据标签格式
        },
    },
    yAxis3D: {
        name:'',
        type: 'category',
        data: yData1,
        axisLabel:{
            show:true,
            // margin:15,
            interval:0,//可控制坐标轴刻度标签的显示间隔，在类目轴中有效。
            formatter:"{value}"//自定义x轴显示数据标签格式
        },
    },
    zAxis3D: {
        name:'数量(个)',
        type: 'value',
        minInterval: 1
    },
    grid3D: {
        boxWidth: 100,
        boxDepth: 100,
        light: {
            main: {
                intensity: 1.2
            },
            ambient: {
                intensity: 0.3
            }
        }
    },
    series: [{
        type: 'bar3D',
        data: data1.map(function (item) {
            return {
                value: [item[0], item[1], item[2]]
            }
        }),
        shading: 'realistic',

        label: {
            // show: true,
            textStyle: {
                fontSize: 16,
                borderWidth: 1
            }
        },
        
        itemStyle: {
            opacity: 0.4
        },

        emphasis: {
            label: {
                textStyle: {
                    fontSize: 20,
                    color: '#900'
                }
            },
            itemStyle: {
                color: '#900'
            }
        }
    }]
};

// var xData2 = ['思茅区', '西盟县', '澜沧县'];
// var yData2 = ['站点数', '主管用户数', '服务商用户数'];
// var data2 = [
// [0,0,1],[1,1,4],[2,2,7],
// [1,0,2],[0,1,5],[1,2,8],
// [2,0,3],[2,1,6],[0,2,9]
// ];

// var xData2 = <?php echo json_encode($xData2);?>;
// var yData2 = <?php echo json_encode($yData);?>;
// var data2 = <?php echo json_encode($dData);?>;

// option2 = {
//         backgroundColor: '#eee',
//     // tooltip : { // 提示框
//     //     trigger : 'item',
//     //     formatter : '{a}:{b}: {c}',
//     // },
//     visualMap: {
//         show:false,
//         max: 20,
//         inRange: {
//             color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
//         }
//     },
//     xAxis3D: {
//         name:'疾病',
//         nameGap: 1,
//         type: 'category',
//         data: xData2,
//         axisLabel:{
//             show:true,
//             // margin:15,
//             interval:0,//可控制坐标轴刻度标签的显示间隔，在类目轴中有效。
//             formatter:"{value}"//自定义x轴显示数据标签格式
//         },
//     },
//     yAxis3D: {
//         name:'',
//         type: 'category',
//         data: yData2,
//         axisLabel:{
//             show:true,
//             // margin:15,
//             interval:0,//可控制坐标轴刻度标签的显示间隔，在类目轴中有效。
//             formatter:"{value}"//自定义x轴显示数据标签格式
//         },
//     },
//     zAxis3D: {
//         name:'数量(个)',
//         type: 'value',
//         minInterval: 1
//     },
//     grid3D: {
//         boxWidth: 100,
//         // boxHeight:100,
//         boxDepth: 100,
//         // postEffect:true,
//         light: {
//             main: {
//                 intensity: 1.2,
//                 shadow: true
//             },
//             ambient: {
//                 intensity: 0.3
//             }
//         },
//         viewControl:{
//             // distane:800,
//             alpha: 0,
//             beta: 0,
//         }
//     },
//     series: [{
//         type: 'scatter3D',
//         // name:'ljss',
//         data: data2.map(function (item) {
//             return {
//                 value: [item[0], item[1], item[2]],
//                 // name: 'p',
//                 // label:{
//                 //     formatter: '{a}:{b}: {c}',
//                 // }
//             }
//         }),
//         shading: 'lambert',
//         label: {
//             // show: true,
//             textStyle: {
//                 fontSize: 16,
//                 borderWidth: 1
//             }
//         },

//         emphasis: {
//             label: {
//                 textStyle: {
//                     fontSize: 20,
//                 }
//             },
//         }
//     }]
// }

// var xData3 = <?php echo json_encode($xData3);?>;
// var yData3 = <?php echo json_encode($yData);?>;
// var data3 = <?php echo json_encode($dData);?>;

// option3 = {
//         backgroundColor: '#eee',
//     // tooltip : { // 提示框
//     //     trigger : 'item',
//     //     formatter : '{a}:{b}: {c}',
//     // },
//     visualMap: {
//         show:false,
//         max: 20,
//         inRange: {
//             color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
//         }
//     },
//     xAxis3D: {
//         name:'民族',
//         type: 'category',
//         data: xData3,
//         axisLabel:{
//             show:true,
//             // margin:15,
//             interval:0,//可控制坐标轴刻度标签的显示间隔，在类目轴中有效。
//             formatter:"{value}"//自定义x轴显示数据标签格式
//         },
//     },
//     yAxis3D: {
//         name:'',
//         type: 'category',
//         data: yData3,
//         axisLabel:{
//             show:true,
//             // margin:15,
//             interval:0,//可控制坐标轴刻度标签的显示间隔，在类目轴中有效。
//             formatter:"{value}"//自定义x轴显示数据标签格式
//         },
//     },
//     zAxis3D: {
//         name:'数量(个)',
//         type: 'value',
//         minInterval: 1
//     },
//     grid3D: {
//         boxWidth: 100,
//         boxDepth: 100,
//         light: {
//             main: {
//                 intensity: 1.2
//             },
//             ambient: {
//                 intensity: 0.3
//             }
//         }
//     },
//     series: [{
//         type: 'bar3D',
//         data: data3.map(function (item) {
//             return {
//                 value: [item[0], item[1], item[2]]
//             }
//         }),
//         shading: 'realistic',

//         label: {
//             // show: true,
//             textStyle: {
//                 fontSize: 16,
//                 borderWidth: 1
//             }
//         },
        
//         itemStyle: {
//             opacity: 0.4
//         },

//         emphasis: {
//             label: {
//                 textStyle: {
//                     fontSize: 20,
//                     color: '#900'
//                 }
//             },
//             itemStyle: {
//                 color: '#900'
//             }
//         }
//     }]
// };

if (option0 && typeof option0 === "object") {
    myChart0.setOption(option0, true);
}
if (option1 && typeof option1 === "object") {
    myChart1.setOption(option1, true);
}
// if (option2 && typeof option2 === "object") {
//     myChart2.setOption(option2, true);
// }
// if (option3 && typeof option3 === "object") {
//     myChart3.setOption(option3, true);
// }

</script>
{/block}